
import React from 'react';
import {
   ListView,
   TextInput,
   View,
   Button,
} from 'react-native';

import ListItem from './listItem';
import styles from './styles';

export default class main extends React.Component {
  static navigationOptions = {
    title: '视频搜索',
    text: '',
  };
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows([]),
        inputText: '',
    };
    // this.searchMovies = this.searchMovies.bind(this);
  }
  searchMovies = (text) => {
    // const text =  this.state.inputText;
    fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=2428b6a&s=${text}`)
     .then((response) => response.json())
     .then((responseData) => {
       if('Search' in responseData ) {
         console.log(responseData.Search);
         const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
         this.setState({
            dataSource: ds.cloneWithRows(responseData.Search),
         });
       }else{
        this.setState({
          dataSource: ds.cloneWithRows([]),
       });
       }
     })
     .catch((err) => {
       console.log(err);
     })
  };
  inputChange = (text) => {
    this.setState({ inputText: text });
  }
  renderRow(row, sId, rId) {
      return (
        <ListItem row={row} delay={rId * 50} />
      );
  }
  render() {
    return (
    <View style={styles.container}>
        <TextInput
          style={{height:40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={this.searchMovies}
          placeholder='输入搜索的关键字'
        />
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    </View>
    );
  }
}
